<template>
	<view class="manage-view">
		<view class="top">
			<uni-icons style="margin-left: 25rpx;" type="left" size="30" color="#9f9f9f" @click="toBackPage">
			</uni-icons>
			<view class="input">全部箴言</view>
		</view>
		
		<view class="queryInputs">
			<view class="queryInput">
				<input @blur="pageCourseTalk" style="width: 100%;font-size: 28rpx;" v-model="queryInput.nickname"
					placeholder="昵称关键词" />
			</view>
		
			<view class="queryInput">
				<input @blur="pageCourseTalk" style="width: 100%;font-size: 28rpx;" v-model="queryInput.content"
					placeholder="内容关键词" />
			</view>
		</view>
		
		<view class="querySelect">
			<picker style="width: 600rpx" mode="selector" :range="sectionList" @change="changeQuerySection"
				range-key="name">
				<view class="picker-input">
					第几节:{{ queryInput.sectionId != null ? queryInput.sectionName : '未选择章节' }}
				</view>
			</picker>
			<uni-icons v-if="queryInput.sectionId != null" style="margin-left: 25rpx;" type="close" size="18"
				color="#9f9f9f" @click="clearSectionQueryInput"></uni-icons>
		</view>
		
		<view class="total-row">
			共{{queryInput.total}}条
		</view>

		<view class="content">
			<view class="talks">
				<view class="talk" v-for="(item,index) in talkList">
					<view class="comment-top">
						<view style="display: flex;flex-direction: row;align-items: center;">
							<view class="avatar">
								<image mode="aspectFill" :src="item.userInfo.avatar"></image>
							</view>
							<view class="nickname">{{item.userInfo.nickname}}</view>
						</view>
					</view>
			
					<view>{{item.content}}</view>
			
					<view class="comment-bottom">
			
						<view class="date">于{{item.gmtCreate}}</view>
			
						<view style="display: flex;flex-direction: row;align-items: center;">
			
							<uni-icons v-if="item.visibility==0" @tap="changeVisibility(item,index)" type="eye-slash" size="28" color="#9d9d9d">
							</uni-icons>
							<uni-icons v-if="item.visibility==1" @tap="changeVisibility(item,index)" type="eye" size="28" color="#9d9d9d">
							</uni-icons>
							<uni-icons v-if="item.visibility==2" @tap="changeVisibility(item,index)" type="eye-filled" size="28" color="#9d9d9d">
							</uni-icons>
			
							<!-- <uni-icons type="trash" size="25" color="#9d9d9d" @click="removeCourseComment(comment.id,commentIndex)"></uni-icons> -->
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				queryInput: {
					courseId: null,
					nickname: "",
					content: "",
					sectionId: null,
					sectionTitle: "",
				
					pageNow: 1,
					pageSize: 20,
					total: 0,
					notIn: 0,
				},
				sectionList: [],
				talkInput: {
					id: null,
					talkIndex: null,
					visibility: null,
					reply: null
				},
				talkList: []
			}
		},
		onLoad(options) {
			if(options.courseId){
				this.queryInput.courseId = options.courseId
				
				if(options.linkId){
					this.queryInput.id = options.linkId
				}
				
				this.pageCourseTalk()
				this.getBasicVOListByCourseId()
			}
		},
		methods: {
			pageCourseTalk() {
				this.queryInput.pageNow = 1
				this.$api.pageCourseTalk(this.queryInput).then(res => {
					this.talkList = res.data.rows
					this.queryInput.total = res.data.total
				})
			},
			getBasicVOListByCourseId(){
				this.$api.getBasicVOListByCourseId({
					courseId:this.queryInput.courseId
				}).then(res => {
					this.sectionList = res.data
				})
			},
			
			changeVisibility(item, index) {
				let visibility = item.visibility - 1
				if (visibility >= 3) {
					visibility = 0
				}
				if (visibility <= -1) {
					visibility = 2
				}
				this.talkInput = {
					id: item.id,
					talkIndex: index,
					visibility: visibility,
					reply: null
				}
				this.manageUpdateCourseTalk()
			},
			
			//移除评论
			removeCourseTalk(id,index) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '是否确定删除该箴言？',
					success(res) {
						if (res.confirm) {
							// 执行请求
							that.$api.manageRemoveCourseTalk({
								id
							}).then(res => {
								that.talkList.splice(index, 1)
								uni.showToast({
									title: '删除成功',
									icon: '',
									duration: 500
								});
							})
						}
					}
				});
			
			
				this.closeModal();
			},
			
			manageUpdateCourseTalk() {
				this.$api.manageUpdateCourseTalk(this.talkInput).then(res => {
					this.talkList[this.talkInput.talkIndex].visibility = this.talkInput.visibility
					uni.showToast({
						title: '修改成功',
						icon: '',
						duration: 500
					});
				})
			},
			
			
			changeQuerySection(e) {
				this.queryInput.sectionId = this.sectionList[e.detail.value].id
				this.queryInput.sectionName = this.sectionList[e.detail.value].name
				this.pageCourseTalk()
			},
			
			clearSectionQueryInput(){
				this.queryInput.sectionId = null
				this.pageCourseComment()
			},

			toBackPage() {
				uni.navigateBack()
			},
		}
	}
</script>

<style scoped lang="scss">
	.manage-view {
		display: flex;
		flex-direction: column;
		padding-top: 80rpx;

		.top {
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;

			padding: 20rpx 0;

			background-color: white;
			border-bottom: solid thin #efefef;


			.input {
				width: 450rpx;
				padding-left: 30rpx;
			}


		}
		
		.queryInputs {
			width: 690rpx;
			margin-left: 30rpx;
			margin-top: 30rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		
			.queryInput {
				width: 270rpx;
				padding: 30rpx;
		
				display: flex;
				flex-direction: row;
				align-items: center;
				background-color: #FFFFFF;
				box-shadow: 0px 0px 4px 2px #f5f7f5;
			}
		
		}
		
		.querySelect {
			width: 630rpx;
			margin-left: 30rpx;
			margin-top: 20rpx;
			padding: 30rpx;
		
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			background-color: #FFFFFF;
			box-shadow: 0px 0px 4px 2px #f5f7f5;
			font-size: 28rpx;
		}
		
		.total-row {
			margin-left: 30rpx;
			width: 690rpx;
			text-align: right;
			margin-top: 20rpx;
		}


		.content {

			display: flex;
			flex-direction: column;
			
			.talks {
			
				display: flex;
				flex-direction: column;
				width: 690rpx;
			
				margin-top: 20rpx;
				margin-bottom: 160rpx;
			
				margin-left: 30rpx;
			
			
				.talk {
					width: 630rpx;
					padding: 30rpx;
					margin: 20rpx 0;
					background-color: #ffffff;
					box-shadow: 1px 1px 8px 2px #e9eee9;
					border-radius: 20rpx;
			
					.comment-top {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 10rpx;
			
						.avatar {
							width: 60rpx;
							height: 60rpx;
							border-radius: 50%;
							overflow: hidden;
						}
			
			
						.nickname {
							margin-left: 20rpx;
						}
					}
			
					.comment-bottom {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;
			
						.date {
							font-size: 28rpx;
							color: gray;
						}
					}
			
					.pictures {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						margin: 10rpx 0;
			
						width: 100%;
						flex-wrap: wrap;
			
						.picture {
							width: 220rpx;
							height: 220rpx;
							border-radius: 10rpx;
							overflow: hidden;
						}
					}
			
				}
			}


		}

		image {
			height: 100%;
			width: 100%;
		}
	}
</style>
